<!--processed-->
<link rel="stylesheet" href="/views/processed/tmp.css">
<section id="processed">
    <div class="breadcrumb">
        Processed
    </div>
    <div class="layout-processed feat-grid">

        <form class="header fx-col-a" id="form" action="">
            <div class="fx-row-s">
                <div class="header-item fl"><label>department：</label></div>
                <div class="header-item w8">
                    <section data-name="business" class="com-select">
                        <div class="sel-item">
                            <input name="businessName" class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="please select"/>
                            <input name="businessUnitId" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul id="businessList" class="sel-content">
                            <!--事业部列表-->
                        </ul>
                    </section>
                </div>

                <div class="header-item fl ml20"><label>siteName：</label></div>
                <div class="header-item w10">
                    <section data-name="site_id" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="please select"/>
                            <input name="accountId" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul class="sel-content" id="siteIdList" style="min-height:300px;">
                            <!--站点列表-->
                        </ul>
                    </section>
                </div>

                <div class="header-item fl ml20"><label>status：</label></div>
                <div class="header-item w8">
                    <section data-name="status" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="please select"/>
                            <input name="status" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul class="sel-content">
                            <li data-val="opened" class="sel-list">Opened</li>
                            <li data-val="in_progress" class="sel-list">In Progress</li>
                            <li data-val="" class="sel-list">ALL</li>
                        </ul>
                    </section>
                </div>

                <div class="header-item fl ml20"><label>customer service：</label></div>
                <div class="header-item w8">
                    <section data-name="customerId" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="please select"/>
                            <input name="customerId" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul id="customerList" class="sel-content">
                            <!--人员列表-->
                        </ul>
                    </section>
                </div>

                <div class="header-item w8 hide">
                    <section data-name="priority" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="please select"/>
                            <input name="priority" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul class="sel-content">
                            <li data-val="" class="sel-list">All</li>
                            <li data-val="normal" class="sel-list">Normal</li>
                            <li data-val="high" class="sel-list">High</li>
                            <li data-val="urgent" class="sel-list">Urgent</li>
                        </ul>
                    </section>
                </div>
                <div class="header-item fl ml20"><label>others：</label></div>
                <div class="header-item w12">
                    <!--search-->
                    <div class="search-a fx-row-b">
                        <i id="searchBtn" class="iconfont icon-sousuo"></i>
                        <input name="keywords" type="text" title="customer name、email address、Topic of email 、Ticket-Sn" placeholder="customer name、email address、Topic of email 、Ticket-Sn">
                    </div>
                </div>
                <div class="header-item ml20">
                    <button id="check" type="button" class="btn-e">Search</button>
                    <button id="reset" type="button" class="btn-b ml3">Reset</button>
                </div>
            </div>
            <div class="fx-row-s">
                <div class="header-item">
                    <button id="staff" type="button" class="btn-a hide">Assign</button>
                    <button id="trash" class="btn-b ml10 hide" type="button">Delete</button>
                    <button id="sendEmail" class="btn-d ml30 hide">Send an e-mail</button>
                </div>
            </div>
        </form>

        <div class="data-box com-check">
            <table class="table-a" data-name="com-check">
                <thead class="t-head">
                    <tr>
                        <th>
                            <!--<input type="checkbox"><span>No</span>-->
                            <label data-name="checkAll">
                                <i data-name="allStyle" class="check-box"></i>
                                <span>No</span>
                            </label>
                        </th>
                        <!--<th>Priority</th>-->
                        <th>Ticket-Sn</th>
                        <th>Site</th>
                        <th style="width:12%;">Topic of email</th>
                        <th>Customer name</th>
                        <th>Replication times</th>
                        <th><span class="waitingTime">waiting time</span><i class="waitingTime iconfont icon-xialaxuanzeicon"></i></th>
                        <th>CS</th>
                        <th>Email address</th>
                        <!--<th data-name="last_reply_time"><span class="reply">Latest reply</span><i class="reply iconfont icon-xialaxuanzeicon"></i></th>
                        <th data-name="add_time"><span class="first">Fist Message</span><i class="first iconfont icon-xialaxuanzeicon"></i></th>-->
                        <!--<th><span class="last">latest Message</span><i class="last iconfont icon-xialaxuanzeicon"></i></th>-->

                    </tr>
                </thead>
                <tbody data-name="siteData">
                </tbody>
            </table>
        </div>

    </div>
    <footer class="footer fx-row-b">
        <div>
            <span>Showing <span id="page-start">1</span> to <span id="page-end">0</span> of <span id="page-total">0</span> entries</span>
            <select name="page">
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="80">80</option>
                <option value="100">100</option>
                <option value="200">200</option>
                <option value="400">400</option>
                <option value="600">600</option>
            </select>
            <span>records per page</span>
        </div>
        <section id="box-page"></section>
    </footer>
</section>

<!--渲染模板开始-->

<!--人员列表-->
<script id="site-customerId" type="text/html">
    <li data-val="-1" class="sel-list">All</li>
    {{each list as v i}}
    <li data-val="{{v.customerId}}" class="sel-list">{{v.nickname}}</li>
    {{/each}}
</script>

<!--事业部列表-->
<script id="site-business-list" type="text/html">
    {{each data as v i}}
    <li data-val="{{v.id}}" class="sel-list">{{v.department_name}}</li>
    {{/each}}
</script>

<!--站点列表-->
<script id="site-list" type="text/html">
    <li data-val="" class="sel-list">All</li>
    {{each list as v i}}
        <li data-val="{{v.email_account_id}}" class="sel-list">{{v.domain}}</li>
    {{/each}}
</script>

<!--list data-->
<script id="site-data" type="text/html">
    {{each list as v i}}
        <tr class="nth">
            <td>
                <label>
                    <i data-name="checkStyle" class="check-box {{ ($imports.i == 4 || $imports.i == 26) ? '' : 'hide'}}"></i>
                    <span>{{i + $imports.count}}</span>
                    <input type="checkbox" value="{{v.ticket_id}}">
                </label>
            </td>
            <!--<td>{{v.sys_priority}}</td>-->
            <td><a href="/{{$imports.path}}#inbox/{{v.ticket_id}}">{{v.ticket_sn}}</a></td>
            <td>{{v.domain}}</td>
            <td>{{v.subject}}</td>
            <td>{{v.from_name}}</td>
            <td>{{v.replay_count}}</td>
            <td>{{v.last_reply_time}}</td>
            <td>{{v.customer_name}}</td>
            <td>{{v.distribution_email}}</td>
        </tr>
    {{/each}}
</script>


<!-- js -->
<script>

    $.extend(window.p,{
        page:1,
        num:20,
        total:0,
        pageObj:null,
        comCheck:null,
        selectStaff:null,
        business_id:com.getCookie("business_id") ? com.getCookie("business_id") : '',
        businessObj:null,
        siteObj:null,
        customerObj:null,
        statusObj:null,
        data:{
            //first_message_order:'asc',
            //latest_message_order:'asc',
            //latest_reply_order:'asc',
            //order: 'add_time',
            sort: ''
        }
    });

$(function(){

    init();

    function init(){

        if(com.getCookie('pageNum')) {
            p.num = com.getCookie("pageNum");
        }

        if(para.user.operation.trashbin){
            $("#trash").removeClass('hide');
        }
        if(para.user.role_id == 4 || para.user.role_id == 26){
            $("#staff").removeClass('hide');
        }

        //默认分页显示
        $("select[name='page']").val(p.num);

        //初始化请求数据列表
        //request();

        //初始化分页
        initPage();

        //初始化多选组件及其选择组件
        p.comCheck =  $('.com-check').comCheck();
        p.statusObj = $("[data-name='status']").comSelect({init:true});

        p.customerObj = $("[data-name='customerId']").comSelect({init:true});
        reqService();

        //初始化事业部
        p.businessObj = $("[data-name='business']").comSelect({
            init:true,
            callback:function(val,text){
                p.business_id = val;
                com.setCookie("business_id",p.business_id,24);
                requestSite(p.business_id);
            }
        });
        p.siteObj = $("[data-name='site_id']").comSelect({
            init:true,
            search:true,
            searchReg:true
        });

        //优先级(隐藏)
        $("[data-name='priority']").comSelect({init:true});


        //查询事件
        $("#check,#searchBtn").on('click',function(){
            request('init');
        });

        //重置
        $("#reset").on('click',function(){
            clearPara();
        })

        //排序事件
        $(".waitingTime").on('click',function(){
            p.data.sort == 'asc' ? p.data.sort = 'desc' : p.data.sort = 'asc';
            request();
        });
        /*$(".reply").on('click',function(){
            p.data.latest_reply_order == 'asc' ? p.data.latest_reply_order = 'desc' : p.data.latest_reply_order = 'asc';

            p.data.sort = p.data.latest_reply_order;
            p.data.order = $(this).closest('th').attr('data-name');
            request();
        });*/

        //选择分页事件
        $("select[name='page']").on('change',function(){
            var val = $(this).val();
            com.setCookie('pageNum',val,720);
            p.num = val;
            request();
            //location.reload();
        });

        //指派
        $("#staff").on('click',function(){
            //选择人员指派
            p.selectStaff = com.layerInsert(para.staffList,function(){
                $("[data-name='staffListObj']").comSelect({
                    init:true,
                    search:true,
                    callback:function(val,text){
                        para.staffId = val;
                    }
                });
                //指派确定按钮
                $(".staff-button").on("click",function(){
                    if(p.comCheck.checked().length <= 0){
                        $.comMessage({
                            type:'prompt',
                            text:'Please check email!',
                        });
                        return;
                    }

                    app.ajax({
                        type:'post',
                        url:app.api('/api/mail/owner/' + para.token),
                        data:{
                            ticket_id:p.comCheck.checked().join(','),
                            cs_admin_id:para.staffId,
                            admin_id:para.user.admin_id,
                        },
                        success:function(res){
                            if(res.code == 0){
                                $.comMessage({
                                    type:'success',
                                    text:'Successful assignment!',
                                });
                                p.selectStaff.close();
                                request();
                            }else{
                                $.comMessage({
                                    type:'warning',
                                    text:res.msg,
                                });
                            }
                        }
                    });
                })
            });
        });

        //垃圾箱
        $("#trash").on('click',function(){
            if(p.comCheck.checked().length <= 0){
                $.comMessage({
                    type:'prompt',
                    text:'Please check email!',
                });
                return;
            }

            $.alert({
                message:'Will you delete from Trash?',
                okText:'confirm',
                cancelText:'cancel',
                okHandler:function(){
                    app.ajax({
                        type:'post',
                        url:app.api('/api/ticket/trashBin/' + para.token),
                        data:{
                            ticket_id:p.comCheck.checked().join(','),
                            admin_id:para.user.admin_id,
                        },
                        success:function(res){
                            if(res.code == 0){
                                $.comMessage({
                                    type:'success',
                                    text:'Successful operation！',
                                });
                                request();
                            }else{
                                $.comMessage({
                                    type:'warning',
                                    text:res.msg,
                                });
                            }
                        }
                    });
                }
            })

        });


        getBusiness();

    }

    function initPage(){
        p.pageObj = $("#box-page").comPage({
            total:p.total,
            pages:p.num,
            beforeText:'Previous',
            afterText:'Next',
            callback:function(page){
                p.page = page;
                request();
            }
        });
    }

    function renderLeftPage(){
        $("#page-total").html(p.total);
        $("#page-start").html((p.page-1)*p.num + 1);
        if(p.page === 1){
            $("#page-end").html(p.num);
        }else if(p.page == Math.ceil(p.total/p.num)) {
            $("#page-end").html(p.total);
        }else{
            $("#page-end").html(p.page*p.num);
        }
    }

    //请求人员列表
    function reqService(){
        app.ajax({
            type:'get',
            url:app.api('/api/customer/list'),
            success:function(res){
                if(res.code == 0){
                    var Tmp = template('site-customerId', res.data);
                    $("#customerList").html(Tmp);

                    if(para.user.role_id == 4 || para.user.role_id == 26){
                        p.customerObj.init("-1");
                    }else{
                        p.customerObj.init(para.user.email_cs_admin_id);
                        $("[data-name='customerId']").find('.sel-head').prop('disabled',true);
                        $(".check-box").addClass('hide');
                    }
                }else{
                    $.comMessage({
                        type:'warning',
                        text:res.msg,
                    });
                }
            }
        });
    }

    //默认获取事业部
    function getBusiness(){
        app.ajax({
            type:'post',
            url:app.api('/api/business/all/list'),
            success:function(res){
                if(res.code == 0){
                    var listTmp = template('site-business-list', res);
                    var businessObj = $("#businessList");
                        businessObj.html(listTmp);
                    //cookie如果有默认站点
                    var isTrue = false;
                    if(!p.business_id){
                        p.business_id = res.data[0].id;
                    }

                    //设置：遍历cookie中的默认存储事业部
                    businessObj.find('.sel-list').each(function(index,item){
                        var itemObj = $(item);
                        if(p.business_id == itemObj.attr('data-val')){
                            $("input[name='businessUnitId']").val(p.business_id);
                            $("input[name='businessName']").val(itemObj.html());
                            isTrue = true;
                            return false;
                        }
                    });

                    //如果找不到匹配的事业部则默认重置第一个
                    if(!isTrue){
                        p.business_id = res.data[0].id;
                        p.businessObj.init();
                    }
                    com.setCookie("business_id",p.business_id,24);

                    requestSite(p.business_id);
                }else{
                    $.comMessage({
                        type:'prompt',
                        text:res.message
                    })
                }
            }
        });
    }

    //默认请求事业部对应的站点名
    function requestSite(val){
        var d = JSON.stringify({
            businessUnitId:val
        })
        app.ajax({
            type:'post',
            url:app.api('/api/business/site/list'),
            data:d,
            success:function(res){
                if(res.code == 0){
                    var listTmp = template('site-list', res.data);
                    $("#siteIdList").html(listTmp);
                    p.siteObj.init();
                }else{
                    $.comMessage({
                        type:'warning',
                        text:res.msg,
                    });
                }
            }
        });
    }


    //请求列表
    function request(init){

        init && (p.page = 1);

        var loadObj = null;
        app.ajax({
            type:'post',
            url:app.api('/api/ticket/getList'),
            data:JSON.stringify(getPara()),
            beforeSend:function(){
                $("[data-name='allStyle']").removeClass('box-add');
                loadObj = $.load({
                    insert:$(".layout-processed"),
                });
                $('footer').removeClass('hide')
            },
            success:function(res){
                template.defaults.imports.count = (p.page-1)*p.num + 1;
                template.defaults.imports.i = para.user.role_id;
                if(res.code == 0){
                    console.log(res)
                    var tmp = template('site-data', res.data);
                    $("[data-name='siteData']").html(tmp);
                    p.total = res.data.total;

                    if(init){
                        p.pageObj.setPage(p.total,p.num,1);
                    }else{
                        p.pageObj.setPage(p.total,p.num);
                    }
                    renderLeftPage();

                }else{
                    $.comMessage({
                        type:'warning',
                        text:res.msg,
                    });
                    $("[name='content']").val('');
                    $("[data-name='siteData']").html('');
                    $('footer').addClass('hide')
                }
            },
            complete:function(){
                loadObj.close()
            }
        });

    }

    function clearPara(){
        $("input[name='keywords']").val('');
        if(para.user.role_id == 4 || para.user.role_id == 26){
            p.customerObj.init();
        }
        p.statusObj.init();
        p.siteObj.init();
        p.businessObj.init();
    }

    //获取列表参数
    function getPara(){
        $.each($("#form").serializeArray(),function(index,item){
            p.data[item.name] = item.value ;
        });
        //p.data.account_id = p.data.account_id || para.user.account_ids[0] || "";
        p.data.page = p.page;
        p.data.limit = p.num;
        return p.data;
    }


})

/*
    msg_num:null,
    status:null,
    start_date:null,
    end_date:null,
    type:null,
    site_id:null,
    content:null,
    page:null,
    page_nums:null
*/

</script>